<template>
    <div class="boxWrapper">
        <div class="card-header">
            <div class="header-left">
                <div class="header-icon" v-show="icon">
                    <i class="iconfont" v-html="icon"></i>
                </div>
                <h3>{{ title }}</h3>
            </div>
            <div class="right-box">
                <slot name="right"></slot>
                <el-tooltip class="item" effect="dark" content="查看更多" placement="top-start">
                    <el-button icon="el-icon-more" circle v-if="isMore" size="mini" @click="handleGetMore" style="margin-left: 10px;"></el-button>
                </el-tooltip>
            </div>
        </div>
        <slot></slot>
    </div>
</template>
<script>
export default ({
    props:{
        icon:{
            type:String,
            default:''
        },
        title:{
            type:String,
            default:''
        },
        isMore:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {

        }
    },
    methods:{
        handleGetMore(){
            this.$emit('more')
        }
    }
})
</script>
<style scoped lang="scss">
  .card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #ebeef5;
    background: #fafbfc;
    .header-left{
        display: flex;
        flex-direction: row;
        justify-content: start;
    }

    .header-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      background: #ecf5ff;
      border-radius: 6px;
      margin-right: 10px;
      
      i {
        color: #409EFF;
        font-size: 16px;
      }
    }
    
    h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      display: inline-block;
      line-height: 30px;
    }
} 
.right-box{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
</style>
